<template>
  <view
    class="container bg-back flex-1 flex flex-col px-[3%] pt-[2%] justify-between"
  >
    <view class="bg-white rounded-2xl px-[4.6%] pb-[4.6%]">
      <view class="flex justify-between py-[4.6%]">
        <image
          :class="isBigSreen ? 'w-[712rpx]' : 'w-[306rpx]'"
          src="@/static/ai.png"
          mode="widthFix"
        ></image>
        <view class="flex relative flex-1">
          <view
            class="w-[124rpx] h-[124rpx] rounded-full bro p-1 relative -z-10"
          >
            <view class="bg-[#D8D8D8] w-full h-full rounded-full"> </view>
          </view>
          <template v-for="(item, index) in iconsList" :key="index">
            <image
              :class="
                isBigSreen ? 'w-[248rpx] h-[248rpx]' : 'w-[124rpx] h-[124rpx] '
              "
              v-if="item.gender == nowImg"
              class="absolute top-0 left-1/2 transform z-10 rounded-full"
              :src="item.image"
              mode="aspectFit"
            ></image>
          </template>

          <!-- <image
            :class="
              isBigSreen ? 'w-[248rpx] h-[248rpx]' : 'w-[124rpx] h-[124rpx] '
            "
            v-if="nowImg == 'male'"
            class="absolute top-0 left-1/2 transform z-10 rounded-full"
            src="@/static/man.png"
            mode="aspectFit"
          ></image> -->
          <view
            class="w-[124rpx] h-[124rpx] rounded-full bro p-1 relative -z-10"
          >
            <view class="bg-[#D8D8D8] w-full h-full rounded-full"> </view>
          </view>
          <view
            class="absolute flex items-center"
            :class="
              isBigSreen
                ? '-bottom-[172rpx] right-24'
                : '-bottom-[82rpx] right-3'
            "
          >
            <image
              :class="isBigSreen ? 'w-[102px] h-[96px]' : 'w-[51px] h-[48px]'"
              src="@/static/zhiyin.png"
              mode="widthFix"
            ></image>
            <view
              :class="isBigSreen ? 'text-2xs' : 'text-xs'"
              class="text-[#666666]"
              >这是本人</view
            >
          </view>
        </view>
      </view>
      <view class="mt-[7%]">
        <view
          class="text-[#666666] mb-[2%]"
          :class="isBigSreen ? 'text-2base' : 'text-base'"
          >由AI生成:</view
        >
        <view class="swiper">
          <swiper
            :disable-touch="state.current != -1"
            class="w-full h-full rounded-2xl overflow-hidden"
            circular
            indicator-active-color="#0256FF"
            indicator-color="#FFFFFF"
            indicator-dots
            :autoplay="state.autoplay"
            @change="changeSwiper"
            :current="state.currentIdx"
          >
            <swiper-item
              class="relative w-full h-full"
              v-for="(item, index) in list.pics"
              :key="index"
            >
              <image
                class="w-full h-full rounded-2xl overflow-hidden"
                mode="aspectFill"
                :src="item.mould_image"
              ></image>
              <!-- <image
                v-show="index === state.current"
                src="@/static/choose.png"
                :class="
                  isBigSreen
                    ? 'w-[112rpx] h-[112rpx] right-4 bottom-4'
                    : 'w-[56rpx] h-[56rpx] right-2 bottom-2'
                "
                class="absolute z-10"
              ></image> -->
            </swiper-item>
          </swiper>
        </view>
      </view>
      <view class="mt-[6%]">
        <view
          class="flex font-bold text-[#999999] mb-[7.5%]"
          :class="isBigSreen ? 'text-2base' : 'text-base'"
        >
          <view
            @click="chooseGender(item, index)"
            :class="{ active: index === state.genderIndex }"
            class="mr-[6.5%]"
            v-for="(item, index) in list.gender_group"
            :key="item.name"
            >{{ item.name }}</view
          >
        </view>
        <view class="flex">
          <view
            @click="chooseStyle(item, index)"
            v-for="(item, index) in styleList"
            :key="index"
            :class="[
              index == 1 ? 'mx-[8.5%]' : '',
              index === state.styleIndex
                ? isBigSreen
                  ? 'active-style-big'
                  : 'active-style'
                : '',
              isBigSreen ? ' rounded-[40rpx]' : ' rounded-[20rpx]',
            ]"
            class="aspect-square w-1/3 overflow-hidden relative"
          >
            <image
              class="w-full h-full"
              mode="aspectFill"
              :src="item.image"
            ></image>
            <view
              :class="isBigSreen ? 'h-[120rpx] line-120' : 'h-[60rpx]'"
              class="absolute w-full bg-[#00000080] left-0 bottom-0"
              style="border-radius: 0rpx 40rpx 20rpx 20rpx; line-height: 60rpx"
            >
              <text
                class="text-white font-bold pl-[4%]"
                :class="isBigSreen ? 'text-2base' : 'text-base'"
                >{{ item.name }}</text
              >
            </view>
            <image
              v-if="state.current === index && item.check"
              src="@/static/choose.png"
              :class="
                isBigSreen
                  ? 'w-[72rpx] h-[72rpx] right-2 top-2'
                  : 'w-[36rpx] h-[36rpx] right-1 top-1'
              "
              class="absolute z-10"
            ></image>
          </view>
        </view>
      </view>
    </view>
    <view
      class="px-[7%]"
      :class="isBigSreen ? 'mb-[10%]' : 'mb-[5%]'"
      v-if="!isBigSreen"
    >
      <view
        class="text-white w-full"
        :class="isBigSreen ? 'big-btn' : 'btn'"
        @click="submit"
      >
        <view class="flex justify-center items-center">
          <text class="pr-[5.5%]">生成我的AI写真 </text
          ><u-icon
            name="arrow-right"
            color="#fff"
            :size="isBigSreen ? '32' : '16'"
          ></u-icon>
        </view>
      </view>
    </view>
    <view class="slide" v-if="isBigSreen">
      <view v-if="open" class="content">
        <view class="circle light mb-30" @click="submit()">
          <view class="slc">生成 </view>
          <view class="slc">AI写真</view>
        </view>

        <view class="circle dark" @click="goHome"> 首页 </view>
      </view>
      <view class="jiantou">
        <view :class="open ? 'a mt-6' : 'b'" @click="handleSilde">
          <up-icon name="arrow-left-double" color="#8a8f96" size="36"></up-icon>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { getIndexData } from "@/api/ai.js";
import { onLoad } from "@dcloudio/uni-app";
import { ref, reactive, computed, nextTick } from "vue";

const isBigSreen = computed(() => {
  return uni.getSystemInfoSync().windowWidth > 500;
});

const state = reactive({
  scence_id: "",
  autoplay: true,
  current: -1,
  currentIdx: 0,
  genderIndex: 0,
  styleIndex: 0,
  id: "",
  gender: "male",
});
const list = ref([]);
const styleList = ref([]);

const choose = (item, index) => {
  if (state.current == index) {
    state.current = -1;
    state.autoplay = true;
  } else {
    state.current = index;
    state.autoplay = false;
  }
};

const chooseGender = (item, index) => {
  console.log(item);
  if (index == state.genderIndex) return;
  state.current = -1;
  state.autoplay = true;
  state.gender = item.key;
  state.genderIndex = index;
  styleList.value = item.styles.forEach((e) => {
    e.check = false;
  });
  state.currentIdx = list.value.pics.findIndex((e) => e.gender == item.key);
};
const chooseStyle = (item, index) => {
  // if (index == state.styleIndex) return;
  state.styleIndex = index;
  // if (state.current == index) {
  //   state.current = -1;
  //   state.autoplay = true;
  // } else {
  state.current = index;
  state.autoplay = false;
  // }
  console.log(state.gender, styleList.value);
  styleList.value.forEach((e, i) => {
    // if (state.current == -1) {
    //   console.log(123);
    //   e.check = false;
    // } else {
    console.log(e.check);
    if (index == i) {
      e.check = !e.check;
      if (!e.check) {
        state.autoplay = true;
        state.current = -1;
      }
    } else {
      e.check = false;
    }
    // e.check = index == i;
    // }
  });
  state.currentIdx = list.value.pics.findIndex(
    (e) => state.gender == e.gender && e.style_type == item.key
  );
  state.id = list.value.pics[state.currentIdx].id;
  list.value.pics.forEach((e, i) => {
    if (state.current == -1) {
      e.check = false;
    } else {
      e.check = state.currentIdx == i;
    }
  });
};

const iconsList = ref([]);
const getData = () => {
  getIndexData().then((res) => {
    res.gender_group.forEach((e) => {
      e.styles.forEach((a) => {
        a["gender"] = e.key;
        a["check"] = false;
      });
    });
    console.log(res.gender_group);

    list.value = res;
    list.value.pics = list.value.pics.map((e) => {
      return {
        ...e,
        check: false,
      };
    });
    iconsList.value = res.icons;
    styleList.value = res.gender_group[state.genderIndex].styles;
    state.id = res.pics[0].id;
    nowImg.value = res.pics[0].gender;
  });
};

const nowImg = ref("");
const changeSwiper = (index) => {
  const { gender, id, style_type_text, check } =
    list.value.pics[index.detail.current];
  state.currentIdx = index.detail.current;
  console.log(check, "checkcheck");
  state.gender = gender;
  const idx = list.value.gender_group.findIndex((e) => e.key == gender);
  state.genderIndex = idx;
  styleList.value = list.value.gender_group[idx].styles;
  console.log(list.value.gender_group, "11111", idx);
  list.value.gender_group[idx ? 0 : 1].styles.forEach((e) => {
    e.check = false;
  });
  // console.log(styleList.value);
  state.styleIndex = styleList.value.findIndex(
    (e) => e.name == style_type_text
  );
  nowImg.value = gender;
  if (check) {
    state.id = id;
  }
};

const submit = () => {
  if (state.current == -1 || !styleList.value.some((e) => e.check)) {
    return uni.showToast({
      title: "请选择图片",
      icon: "none",
      duration: 3000,
    });
  }
  uni.navigateTo({
    url: `/pages/ai/upload?id=${state.id}&scence_id=${state.scence_id}`,
  });
};

onLoad(({ scence_id }) => {
  state.scence_id = scence_id;
  getData();
});

const open = ref(true);
const handleSilde = () => {
  open.value = !open.value;
};

const goHome = () => {
  uni.reLaunch({
    url: "/pages/ai/home",
  });
};
</script>

<style lang="scss" scoped>
.swiper {
  width: 100%;
  aspect-ratio: 327 / 280;
}
::v-deep .uni-swiper-dots-horizontal {
  left: 15% !important;
  bottom: 30rpx;
}
::v-deep .uni-swiper-dot {
  width: 10rpx;
  height: 10rpx;
}
.active {
  color: #000;
  position: relative;
  &::after {
    content: "";
    position: absolute;
    bottom: 0rpx;
    left: 0;
    width: 100%;
    height: 8rpx;
    background: #0256ff;
  }
}
.active-style {
  border-radius: 20rpx 20rpx 20rpx 20rpx;
  outline: 4rpx solid #0256ff;
}
.active-style-big {
  border-radius: 40rpx 40rpx 40rpx 40rpx;
  outline: 8rpx solid #0256ff;
}

.btn {
  height: 84rpx;
  line-height: 84rpx;
  background: linear-gradient(135deg, #0256ff 0%, #25a0ec 100%);
  border-radius: 50rpx 50rpx 50rpx 50rpx;
  text-align: center;
  font-weight: 700;
  font-size: 32rpx;
  color: #ffffff;
}
.big-btn {
  height: 168rpx;
  line-height: 168rpx;
  background: linear-gradient(135deg, #0256ff 0%, #25a0ec 100%);
  border-radius: 100rpx 100rpx 100rpx 100rpx;
  text-align: center;
  font-weight: 700;
  font-size: 64rpx;
  color: #ffffff;
}
.bro {
  border: 2rpx solid #0256ff;
}
.line-120 {
  line-height: 120rpx !important;
  border-radius: 0rpx 80rpx 40rpx 40rpx !important;
}

.slide {
  position: fixed;
  z-index: 555;

  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  padding: 48rpx 20rpx;
  bottom: 20%;
  width: 248rpx;
  background: linear-gradient(
    180deg,
    rgba(53, 58, 64, 0.9) 0%,
    rgba(22, 23, 27, 0.9) 100%
  );
  border-radius: 64rpx 0rpx 0rpx 120rpx;
  border: 1rpx solid;
  // border-image: linear-gradient(
  //     180deg,
  //     rgba(66.00000366568565, 71.00000336766243, 80.00000283122063, 1),
  //     rgba(32.00000189244747, 35.00000171363354, 38.0000015348196, 1)
  //   )
  //   4 4;
  .circle {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 188rpx;
    height: 188rpx;
    font-size: 48rpx;
    font-weight: 600;
    text-align: center;
    color: #c3c8cd;
    .slc {
      line-height: 1.2;
    }
    &.light {
      font-weight: 600;
      color: #ffffff;
      text-shadow: 0px 0px 50px rgba(38, 171, 247, 0.2),
        0px 0px 20px rgba(99, 207, 255, 0.5);
      background: linear-gradient(321deg, #0077ce 0%, #4ec0ff 100%);
      border-radius: 200rpx 200rpx 200rpx 200rpx;
      filter: blur(0.3px);
    }
    &.dark {
      background: linear-gradient(318deg, #1d2328 0%, #131314 100%);
      border-radius: 100rpx 100rpx 100rpx 100rpx;
      filter: blur(0.3px);

      box-shadow: inset 0rpx 0rpx 3rpx 0rpx rgba(63, 63, 63, 0.45);
    }
    &.mb-30 {
      margin-bottom: 30rpx;
    }
  }
  .jiantou {
    .a {
      transform: rotate(90deg);
    }
    .b {
      transform: rotate(-90deg);
    }
  }
}
</style>
